<!--
=================================
===== 应用管理 ====================
=================================
-->

<template>

  <div class="fly-container">

    <div class="fly-main-container">


      <fly-table ref="tableRef"
                 :data="tableAppInfoData"
                 :config="elTableConfig"
                 :searchField="searchField"
                 :columns="appInfoColumns"
                 :searchShowCol="3"
                 @pageChange="locadElTableData">

        <template #tableExp="scope">
          <el-button type="primary" size="default" class="fly-button-exp" :icon="Promotion">导出</el-button>
        </template>

        <template #tableHeader="scope">
          <el-button type="primary" size="default"
                     class="fly-button fly-button-add" :icon="FolderAdd"
                     @click="onTapAppInfoAdd">新增
          </el-button>
          <el-button type="primary" size="default" class="fly-button fly-button-exp" :icon="Promotion">导出</el-button>
        </template>

        <!-- 表格操作 -->
        <template #toolBar="scope">
          <el-button type="primary"  size="default" class="fly-button fly-view-button" :icon="List">查看</el-button>
          <el-button type="primary"  size="default" class="fly-button fly-edit-button" :icon="Edit">编辑</el-button>
<!--          <el-button type="primary" class="fly-button fly-edit-button" :icon="Refresh">重置密码</el-button>-->
          <el-button type="primary" size="default" class="fly-button fly-remove-button" :icon="Delete">删除</el-button>
        </template>

      </fly-table>

    </div>

  </div>


  <ref-app-info ref="refAppInfo" @bindtap="tapAppInfo"></ref-app-info>


</template>


<script setup lang="ts">
import {defineAsyncComponent, onMounted, reactive, ref} from "vue";
import {List, Edit, View, Delete, FolderAdd, Promotion} from '@element-plus/icons-vue';
import useAppInfoComposable from "/@/composables/admin/AppInfoComposable";
import {elTableConfig} from "/@/components/FlyTable/useElTable";
import useAppInfoBuilder, {AppInfo, AppInfoQuery} from "/@/api/admin/model/AppInfoModel";

import RefAppInfo from "/@/views/admin/app/RefAppInfo.vue";
import {DialogTypeEnum} from "/@/components/dialog/DialogPopup";


const {
  searchField,
  appInfoParams
} = useAppInfoBuilder();

const FlyTable = defineAsyncComponent(() => import('/@/components/FlyTable/index.vue'));

const {
  loadTableData,
  appInfoColumns,
  tableAppInfoData
} = useAppInfoComposable();

onMounted(() => {
  elTableConfig.printName = '应用管理';
  getTableData();
});

const dataArr = ref([]);

// 初始化列表数据
const getTableData = () => {

  elTableConfig.loading = true;
  for (let i = 0; i < 10; i++) {
    loadTableData(appInfoParams);
  }
  elTableConfig.loading = false;

};


const locadElTableData = (obj: AppInfoQuery) => {
  console.log('locadElTableData', obj)
  console.log('locadElTableData page', obj.page)
  console.log('locadElTableData limit', obj.limit)
  loadTableData(obj);
}


/**
 *  新增/修改/查看 弹窗
 */
const refAppInfo = ref<{
  show: (type: DialogTypeEnum, data?: AppInfo | null) => void,
  onClose: () => void
}>();


const onTapAppInfoAdd = () => {
  refAppInfo.value?.show(DialogTypeEnum.ADD, null);
};


const tapAppInfo = (appInfo: AppInfo) => {

}

</script>

<style scoped lang="scss">

.fly-container {
  background-color: #f5f6f6;
}

.fly-main-container {
  background-color: #ffffff;
  border-radius: 5px;
  margin: 10px;
  min-height: 350px;
  //padding: 5px 10px;
}


.fly-table-container {
  padding: 20px 10px;
}


.fly-tool-bar {
  display: flex;
  flex-wrap: wrap;
  letter-spacing: 5px;
  padding: 10px;
}

.fly-button-add {
  border-radius: 3px;
  background-color: #1E9FFF;
  border-color: #4aacf8;

  letter-spacing: 3px;
}

.fly-button-add:hover {
  background-color: #4aacf8;
  letter-spacing: 3px;
}


.fly-button-exp {
  border-radius: 3px;
  background-color: #16baaa;
  border-color: #16baaa;
  color: #FFFFFF;
  letter-spacing: 3px;
}

.fly-el-table-container {
  padding: 20px 0;
  border: 1px #f3f3f3 solid;
}


</style>